<template>
	<!-- 确认订单 -->
	<view class="order-confirm" v-if="ruleForm && Object.keys(ruleForm).length>0">
		<view class="u-margin-top-20 body-1">
			<view class="u-margin-bottom-30">实付款</view>
			<view class="u-flex u-col-bottom">
				<view class="money">
					<text class="u-font-40 u-margin-right-20">¥</text>
					<text>{{ruleForm.productSumPrice | thousands}}</text>
				</view>
				<image class="u-margin-left-20  u-margin-bottom-14" src="@/static/img/icon-edit@2x.png"
					@click="handlePriceOpen"></image>
			</view>
		</view>
		<view class="u-margin-top-20 body-2">
			<view class="u-flex u-row-between u-margin-top-38 u-margin-bottom-38">
				<view>启运港</view>
				<view class="u-flex u-flex-1" @click="shows.startHarbor=true">
					<view class="u-margin-right-10 u-flex-1 u-text-right">
						{{getPortName(port,ruleForm.startHarborId)}}
					</view>
					<image src="@/static/img/icon_arrowright.png"></image>
				</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="u-flex u-row-between u-margin-top-38 u-margin-bottom-38">
				<view>目的港</view>
				<view class="u-flex u-flex-1" @click="shows.endHarbor=true">
					<view class="u-margin-right-10 u-flex-1 u-text-right">
						{{getPortName(port,ruleForm.endHarborId)}}
					</view>
					<image src="@/static/img/icon_arrowright.png"></image>
				</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="u-flex u-row-between u-margin-top-38">
				<view>约定付款时间</view>
				<view class="u-flex u-flex-1" @click="shows.payTimeNode = true">
					<view class="u-margin-right-10 u-flex-1 u-text-right">
						{{ruleForm.payTimeNode}}
					</view>
					<image src="@/static/img/icon_arrowright.png"></image>
				</view>
			</view>
		</view>

		<view class="order-confirm_bottom">
			<u-button type="success" :custom-style="{
				'background':'#0FBD7F',
				'color':'#fff',
				'padding':'12px 0'
			}" class="u-flex-1" shape="circle" @click="handleSubmit">确定</u-button>
		</view>


		<u-popup v-model="shows.price" mode="center" border-radius="12" @close="handlePriceClose">
			<view class="tips">
				<view class="tips-title">
					修改金额
				</view>
				<view class="tips-info">
					<u-input v-model="price" placeholder="请输入金额" type="digit" border />
				</view>
				<view>
					<view class="u-flex">
						<u-button class="u-flex-1 u-margin-right-10" shape="circle"
							@click="handlePriceClose">取消</u-button>
						<u-button :custom-style="{
						'background':'#0FBD7F',
						'color':'#fff'
					}" class="u-flex-1" shape="circle" @click="handlePriceSubmit">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="shows.payTimeNode" mode="single-column" :list="getAppointedTime(ruleForm.tradeMode)"
			@confirm="handlePayTimeNodeConfirm"></u-select>
		<u-select v-model="shows.endHarbor" mode="mutil-column-auto" :list="ports"
			@confirm="handleEndHarborConfirm"></u-select>
		<u-select v-model="shows.startHarbor" mode="mutil-column-auto" :list="ports"
			@confirm="handleStartHarborConfirm"></u-select>
	</view>
</template>

<script>
	import {
		getPortName,
		getPortModels
	} from '@/utils/port.js'
	import {
		termsDeliveryType
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				shows: {
					price: false,
					endHarbor: false,
					startHarbor: false,
					payTimeNode: false
				},
				orderId: null,
				price: null,
				port: [],
				ports: [],
				ruleForm: {}
			}
		},
		computed: {
			getAppointedTime: () => {
				return (tradeMode) => {
					if (!tradeMode) {
						return []
					}
					const {
						list
					} = termsDeliveryType.find((x) => {
						return x.code === tradeMode;
					});
					return list;
				}

			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.getById()
			this.getAllHarborInfo()
		},
		methods: {
			handlePayTimeNodeConfirm(list) {
				this.$set(this.ruleForm, 'payTimeNode', list[list.length - 1].value)
			},
			handleEndHarborConfirm(list) {
				this.$set(this.ruleForm, 'endHarborId', list[list.length - 1].value)
			},
			handleStartHarborConfirm(list) {
				this.$set(this.ruleForm, 'startHarborId', list[list.length - 1].value)
			},
			async getById() {
				uni.showLoading({
					title: '加载中...'
				});
				this.ruleForm = {}
				const res = await this.$api.getOrderById({
					id: this.orderId
				})
				this.ruleForm = {
					id: this.orderId,
					productSumPrice: res.result.buyerOrderList.productSumPrice,
					startHarborId: res.result.buyerOrderList.startHarborId,
					endHarborId: res.result.buyerOrderList.endHarborId,
					payTimeNode: res.result.buyerOrderList.payTimeNode,
					tradeMode: res.result.buyerOrderList.tradeMode,
					flag: true
				}
				uni.hideLoading();
			},
			async getAllHarborInfo() {
				const res = await this.$api.getAllHarborInfo()
				this.port = res.result
				this.ports = getPortModels(res.result)
			},
			handlePriceSubmit() {
				this.ruleForm.productSumPrice = this.price
				this.shows.price = false
			},
			handlePriceClose() {
				this.shows.price = false
				this.price = null
			},
			handlePriceOpen() {
				this.price = this.ruleForm.productSumPrice
				this.shows.price = true
			},
			async handleSubmit() {
				await this.$api.getOrderApproval(this.ruleForm);
				uni.navigateBack({
					delta:-1
				})
			},
			getPortName
		}
	}
</script>

<style scoped lang="less">
	.order-confirm {
		color: #202020;
		font-size: 15px;

		.body-1 {
			background: #fff;
			padding: 20px 15px 15px 15px;

			.money {
				font-weight: bold;
				font-size: 32px;
				color: #F76260;
			}

			image {
				width: 16px;
				height: 16px;
			}
		}

		.body-2 {
			background: #fff;
			padding: 19px 15px;

			image {
				width: 12px;
				height: 12px;
			}
		}

		.order-confirm_bottom {
			margin: 52px 30px 0 30px;
		}
	}

	.tips {
		padding: 20px;
		width: 295px;
		min-height: 187px;
		display: flex;
		flex-flow: column;
		justify-content: space-between;

		.tips-title {
			color: #202020;
			font-weight: bold;
			font-size: 16px;
			text-align: center;
		}

		.tips-info {
			color: #666666;
			font-size: 14px;
			text-align: center;
			padding: 15px 0;
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>